<template>
  <div id="content">
    <div class="title">宝石商城</div>
    <!-- 轮播图 -->
    <div class="swipers">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in swiperList" :key="index">
          <img v-lazy="item.img_url" class="swiper-image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 收款地址 -->
    <div class="collect-money" @click="copy">
      <div><van-icon name="after-sale" color="#7C91AD" size="40" /></div>
      <div class="collect-money-address">
        <div style="font-size: 15px" ref="collectAddress">
          {{ collectMoneyAddr }}
        </div>
        <div style="font-size: 16px; color: #7c91ad">收款地址</div>
      </div>
    </div>
    <!-- 商品列表、订单列表 -->
    <div class="store-order">
      <div
        :style="showGem == true ? 'background:#2B405D' : ''"
        @click="showGemList"
      >
        宝石专区
      </div>
      <div
        :style="showOrder == true ? 'background:#2B405D' : ''"
        @click="showOrderList"
      >
        我的订单
      </div>
    </div>
    <!-- 宝石列表 -->
    <div class="gem" v-if="showGem">
      <van-pull-refresh v-model="refreshGem" @refresh="onRefreshGem">
        <van-list
          v-model="loadingGem"
          :finished="finishedGem"
          finished-text="没有更多了"
          @load="loadGem"
        >
          <div class="gem-list" v-for="item in listGem" :key="item.id">
            <div class="gem-area">{{ item.key }}</div>
            <div class="gem-detail" v-for="gems in item.data">
              <div>
                <van-image
                  width="100"
                  height="100"
                  :src="gems.cover"
                  radius="10"
                />
              </div>
              <div class="gem-detail-desc">
                <div style="font-weight: bold">{{ gems.kj_title }}</div>
                <div style="color: #667b97">
                  兑换：{{ gems.kj_gme_price }} GEM
                </div>
                <div style="color: #667b97">
                  价格：{{ gems.kj_usdt_price }} U
                </div>
                <div style="color: #667b97">算力：{{ gems.calculation }} T</div>
                <div style="color: #667b97">
                  产量：{{ gems.all_produce }} GEM
                </div>
                <div style="color: #667b97">周期：{{ gems.cycel }} 天</div>
              </div>
              <div class="gem-buy" @click="storeDetail(gems.id)">购买</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 定单列表 -->
    <div class="order" v-if="showOrder">
      <van-pull-refresh v-model="refreshOrder" @refresh="onRefreshOrder">
        <van-list
          v-model="loadingOrder"
          :finished="finishedOrder"
          finished-text="没有更多了"
          @load="loadOrder"
        >
          <div class="order-detail" v-for="ord in listOrder" :key="ord.id">
            <div class="order-number">
              <div style="font-size: 13px">
                订单编号：{{ ord.order_number }}
              </div>
              <div class="order-status">
                <div style="margin-right: 10px">
                  {{ ord.sta_name }}
                </div>
                <van-icon name="arrow" />
              </div>
            </div>
            <div class="order-desc">
              <div class="order-desc-1">
                <div>
                  <van-image
                    width="100"
                    height="100"
                    :src="ord.orderKj.cover"
                    radius="10"
                  />
                </div>
                <div class="gem-detail-desc" style="margin-left: 20px">
                  <div style="font-weight: bold">
                    {{ ord.orderKj.kj_title }}
                  </div>
                  <div style="color: #667b97">
                    兑换：{{ ord.orderKj.kj_gme_price }}
                  </div>
                  <div style="color: #667b97">
                    算力：{{ ord.orderKj.calculation }} T
                  </div>
                  <div style="color: #667b97">
                    产量：{{ ord.orderKj.all_produce }} GME
                  </div>
                  <div style="color: #667b97">
                    周期：{{ ord.orderKj.cycel }} 天
                  </div>
                </div>
              </div>
              <div style="color: #667b97">× 1</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 底部菜单 -->
    <div class="bottom">
      <div class="bottom-banner" style="color: #fff">
        <div><van-icon name="apps-o" size="24" /></div>
        <div>宝石商城</div>
      </div>
    </div>
    <!-- <div class="bottom">
      <div class="bottom-banner" @click="isBuild">
        <div><van-icon name="wap-home-o" size="24" /></div>
        <div>首页</div>
      </div>
      <div class="bottom-banner" @click="isBuild">
        <div><van-icon name="chart-trending-o" size="24" /></div>
        <div>市场</div>
      </div>
      <div class="bottom-banner" style="color: #fff">
        <div><van-icon name="apps-o" size="24" /></div>
        <div>宝石商城</div>
      </div>
      <div class="bottom-banner" @click="isBuild">
        <div><van-icon name="chat-o" size="24" /></div>
        <div>社区</div>
      </div>
      <div class="bottom-banner" @click="isBuild">
        <div><van-icon name="contact" size="24" /></div>
        <div>我的</div>
      </div>
    </div> -->
  </div>
</template>

<script>
import Vue from "vue";
import { getSwiperList, getGemList, getCollectMoneyAddr } from "../../api/gem";
import { getUserOrder, getUserInfo } from "../../api/user";
import {
  Swipe,
  SwipeItem,
  Lazyload,
  Cell,
  Icon,
  List,
  PullRefresh,
  Image as VanImage,
  Button,
  Toast,
} from "vant";

Vue.use(Swipe)
  .use(SwipeItem)
  .use(Lazyload)
  .use(Cell)
  .use(Icon)
  .use(List)
  .use(PullRefresh)
  .use(VanImage)
  .use(Button);

export default {
  data() {
    return {
      swiperList: [],
      refreshGem: false,
      loadingGem: false,
      finishedGem: false,
      listGem: [],
      listValidGem: {
        page: 1,
        pageSize: 15,
      },
      gemTotal: 0,
      listValidOrder: {
        page: 1,
        pageSize: 15,
      },
      orderTotal: 0,
      refreshOrder: false,
      loadingOrder: false,
      finishedOrder: false,
      listOrder: [],
      showGem: true,
      showOrder: false,
      user: {},
      collectMoneyAddr: "",
    };
  },
  created() {
    this.fetchSwiper();
    this.fetchGem();
    this.fetchOrder();
    this.fetctMoneyAddr();
  },
  methods: {
    //   显示宝石页面
    showGemList() {
      this.showGem = true;
      this.showOrder = false;
    },
    // 显示订单页面
    showOrderList() {
      this.showGem = false;
      this.showOrder = true;
    },
    // 获取轮播图
    fetchSwiper() {
      getSwiperList().then((res) => {
        this.swiperList = res.data;
      });
    },
    fetctMoneyAddr() {
      getCollectMoneyAddr().then((res) => {
        this.collectMoneyAddr = res.data.collect_money_addr;
      });
    },
    // 加载宝石列表
    fetchGem() {
      getGemList(this.listValidGem).then((res) => {
        this.listGem = res.data.list;
        this.gemTotal = res.data.total;
        this.loadingGem = false;
        this.refreshGem = false;
        this.finishedGem = true;
      });
    },
    // 加载更多钻石列表
    loadGem() {
      if (this.gemTotal >= 15) {
        this.listValidGem.page += 1;
        getGemList(this.listValidGem).then((res) => {
          this.listGem = res.data.list;
          this.gemTotal = res.data.total;
          this.loadingGem = false;
          this.refreshGem = false;
          this.finishedGem = true;
        });
      }
    },
    // 刷新钻石
    onRefreshGem() {
      getGemList({ page: 1, pageSize: 15 }).then((res) => {
        this.listGem = res.data.list;
        this.gemTotal = res.data.total;
        this.loadingGem = false;
        this.refreshGem = false;
        this.finishedGem = true;
      });
    },
    // 加载订单列表
    fetchOrder() {
      getUserOrder(this.listValidOrder).then((res) => {
        this.listOrder = res.data.list;
        this.orderTotal = res.data.total;
        this.loadingOrder = false;
        this.refreshOrder = false;
        this.finishedOrder = true;
      });
    },
    // 加载更多订单列表
    loadOrder() {
      if (this.orderTotal >= 15) {
        this.listOrder.page += 1;
        getUserOrder(this.listOrder).then((res) => {
          this.listOrder = res.data.list;
          this.orderTotal = res.data.total;
          this.loadingOrder = false;
          this.refreshOrder = false;
          this.finishedOrder = true;
        });
      }
    },
    // 刷新订单
    onRefreshOrder() {
      getUserOrder({ page: 1, pageSize: 15 }).then((res) => {
        this.listOrder = res.data.list;
        this.orderTotal = res.data.total;
        this.loadingOrder = false;
        this.refreshOrder = false;
        this.finishedOrder = true;
      });
    },
    // 点击跳转购买详情页
    storeDetail(id) {
      var user_id = localStorage.getItem("user_id");
      localStorage.setItem(user_id + ":gme_id", id);
      this.$router.push({ name: "storeDetail", params: { id: id } });
    },
    copy() {
      this.copyText = this.$refs.collectAddress.innerText;
      var input = document.createElement("input"); // 直接构建input
      input.value = this.copyText; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
      Toast("复制成功！");
    },
    isBuild() {
      Toast("正在开发中");
    },
  },
};
</script>

<style scoped>
#content {
  background: #1b2b42;
  color: #fff;
  min-height: 100vh;
}
.title {
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  margin-left: 5%;
  padding: 20px 0;
}
.swiper-image {
  height: 180px;
  width: 90%;
  border-radius: 5%;
}
.clickCopy {
  background: #35c9a2;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 13px;
}
.collect-money {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.collect-money-address {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.store-order {
  margin-left: 5%;
  width: 90%;
  display: flex;
  flex-direction: row;
}
.store-order div {
  width: 50%;
  border: 0.5px solid #566a84;
  padding: 10px 30px;
}
/* 钻石样式 */
.gem {
  margin-bottom: 50px;
}
.gem-list {
  width: 90%;
  margin-left: 5%;
}
.gem-area {
  font-size: 24px;
  margin: 20px 0;
  text-align: left;
}
.gem-detail {
  background: #2b405d;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 15px 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.gem-detail-desc {
  line-height: 20px;
  text-align: left;
  font-size: 14px;
}
.gem-buy {
  padding: 6px 24px;
  background: #35c9a2;
  border-radius: 10px;
  font-size: 14px;
}
/* 订单样式 */
.order {
  margin-top: 20px;
  margin-bottom: 50px;
}
.order-detail {
  width: 90%;
  margin-left: 5%;
  background: #2b405d;
  border-radius: 10px;
  margin-bottom: 20px;
}
.order-number {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px 20px;
  font-size: 13px;
}
.order-status {
  color: #667b97;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order-desc {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 20px 10px;
}
.order-desc-1 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
/* 底部样式 */
.bottom {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #2b405d;
  position: fixed;
  bottom: 0;
  color: #768ba8;
}
.bottom-banner {
  line-height: 16px;
  padding: 5px 0;
}
</style>
